<div class="flex">
  <div class="tools">
    <div *ngFor="let item of tools">
      <div class="title">{{ item.group }}</div>
      <div class="buttons">
        <a
          *ngFor="let button of item.children"
          [title]="button.name"
          [draggable]="button.data"
          (dragstart)="onDrag($event, button)"
          (touchstart)="onTouchstart(button)"
        >
          <i class="iconfont {{ button.icon }}"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="full" #workspace (contextmenu)="onContextMenu($event)"></div>
  <div class="props">
    <div class="pv5">
      <div *ngIf="!selected">
        <div class="title">欢迎使用le5le-topology！</div>
        <div class="ml30 mb20 mt10">
          <a
            href="https://github.com/le5le-com/topology"
            target="_blank"
            class="block mt20 mb15"
            style="color:#f60!important;text-decoration: underline;"
            >喜欢，点击这里打个star吧</a
          >
          <a href="https://www.yuque.com/alsmile/topology" target="_blank">使用教程</a><br />
          <a href="http://topology.le5le.com/assets/img/topology_wechat.jpg?t=1" target="_blank">微信交流群（大群）</a
          ><br />
          <a href="http://topology.le5le.com/assets/img/topology_wechat2.jpg" target="_blank">微信交流群2</a><br />
          <a href="https://www.yuque.com/alsmile/topology/faq#EVbCgt" target="_blank">联系我们</a>
        </div>
        <div class="title mt30">[Todo] 未来规划</div>
        <ul class="ml30 mb20 mt10">
          <li>Github issues</li>
          <li>React demo</li>
          <li>Vue3 demo</li>
          <li>系列教程</li>
        </ul>
        <div class="abs" style="bottom:.2rem">
          <div class="title mt30">
            小提示
          </div>
          <ul class="ml30 mb20 mt10">
            <li>方向键：控制节点移动5个像素</li>
            <li>Ctrl + 方向键：控制节点移动1个像素</li>
            <li>Alt + 鼠标移动：移动整个画布</li>
            <li>Alt + 鼠标滚轮：缩放</li>
            <li>添加或选中节点，右侧属性支持上传各种图片哦</li>
          </ul>
        </div>
      </div>
      <div *ngIf="selected">
        <app-props
          [props]="selected"
          [readonly]="readonly"
          (ok)="onChangeProps($event)"
          (animateChange)="onAnimateChange()"
        ></app-props>
      </div>
    </div>
  </div>
</div>
<div class="context-menus" id="canvas-menus" [ngStyle]="contextmenu">
  <div>
    <a [class.disabled]="!selNodes" (click)="onTop()">
      置顶
    </a>
  </div>
  <div>
    <a [class.disabled]="!selNodes" (click)="onBottom()">
      置底
    </a>
  </div>
  <div class="line"></div>
  <div>
    <a [class.disabled]="!selNodes || selNodes.length < 2" (click)="onCombine()">
      组合
    </a>
  </div>
  <div>
    <a [class.disabled]="!selNodes || selNodes.length > 1 || selNodes[0].name !== 'combine'" (click)="onUncombine()">
      取消组合
    </a>
  </div>
  <div class="line"></div>
  <div>
    <a [class.disabled]="!selNodes" (click)="onDel()">
      删除
    </a>
  </div>
  <div class="line"></div>
  <div>
    <a (click)="canvas.undo()" class="flex">
      <span class="full">撤消</span>
      <span class="ml50">Ctrl + Z</span>
    </a>
  </div>
  <div>
    <a (click)="canvas.redo()">
      恢复
      <span class="ml50">Ctrl + Shift+ Z</span>
    </a>
  </div>
  <div class="line"></div>
  <div>
    <a (click)="canvas.cut()" class="flex">
      <span class="full">剪切</span>
      <span class="ml50">Ctrl + X</span>
    </a>
  </div>
  <div>
    <a (click)="canvas.copy()" class="flex">
      <span class="full">复制</span>
      <span class="ml50">Ctrl + C</span>
    </a>
  </div>
  <div>
    <a (click)="canvas.parse()" class="flex">
      <span class="full">粘贴</span>
      <span class="ml50">Ctrl + V</span>
    </a>
  </div>
  <div class="line"></div>
  <div>
    <a [class.disabled]="!selNodes || selNodes.length > 1 || !selNodes[0].image" (click)="onCopyImage()" class="flex">
      <span class="full">复制节点图片地址</span>
    </a>
  </div>
</div>
